<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <!-- 引入Bootstrap 5稳定版的CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- 引入Bootstrap 5稳定版的JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <div class="container mt-5" id="app">
    <div class="row d-flex justify-content-center">
      <div class="col-md-6 ">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">记事本</h5>
            <input @keyup.enter="addItem" type="text" class="form-control mb-3" placeholder="请输入任务描述" v-model="addIpt">
            <button class="btn btn-primary" @click="addItem">添加</button>
            <ul class="list-group">
              <li class="list-group-item" v-for="(item,index) in list" :key="index">
                {{index+1}}:{{item.taskDes}}
                <button class="btn btn-sm btn-danger float-end" @click="deleteItem(item.id)">删除</button>
              </li>

            </ul>
          </div>
          <div class="card-footer" v-show="list.length>0">
            <span>任务数:{{this.list.length}}</span>
            <button class="btn btn-sm btn-warning" @click="list=[]">清空</button>
          </div>
        </div>

      </div>
    </div>
  </div>

</body>
<script>
  new Vue({
    el: '#app',
    data: {
      addIpt: '',
      message: 'Hello Vue!',
      list: [{ id: 1, taskDes: '跑步1公里' }, { id: 2, taskDes: '打羽毛球10局' }, { id: 3, taskDes: '打乒乓球10局' }]
    }
    , methods: {
      addItem () {
        if (this.addIpt === '') {
          alert('请输入任务描述')
          return
        }
        var lenght = this.list.length + 1;
        this.list.push({
          id: lenght,
          taskDes: this.addIpt
        })
        this.addIpt = ''

      },
      deleteItem (id) {
        console.log(id)
        this.list = this.list.filter(item => item.id !== id)
      }
    }
  })  
</script>

</html>